<template name="loading-box">
	<view class="uni-column">
		<view class="skeleton uni-flex uni-column" v-for="(item,index) in number" v-bind:key="index">
			<view class="skeleton-row uni-flex uni-row">
				<view class="skeleton-head"></view>
				<view class="skeleton-body uni-flex uni-column">
					<view class="skeleton-title"></view>
					<view class="skeleton-content"></view>
					<view class="skeleton-content2"></view>
				</view>
			</view>
			<view class="skeleton-bottom"></view> 
		</view>
	</view>
</template>

<script>
	export default {
		name: 'loading-box',
		data() {
			return {
				number: 10
			}
		},
	}
</script>

<style>
	@import "../common/uni.css";
	.skeleton {
		padding: 15px 10px;
		margin-bottom: 15px;
	}
	.skeleton:last-child{
		margin-bottom: 0; 
	}
	.skeleton .skeleton-head,
	.skeleton .skeleton-title,
	.skeleton .skeleton-content2,
	.skeleton .skeleton-content {
		background: rgba(255, 255, 255, 255);
	}

	.skeleton-body {
		justify-content: space-between;
	}

	.skeleton-head {
		width: 170px;
		height: 120px;
	}

	.skeleton-title {
		width: 570px;
		height: 50px;
		margin-left: 20px;
		transform-origin: left;
		animation: skeleton-stretch .5s linear infinite alternate;
	}

	.skeleton-content,
	.skeleton-content2 {
		height: 25px;
		margin-top: 5px;
		margin-left: 20px;
	}

	.skeleton-content {
		width: 280px;
	}

	.skeleton-content2 {
		width: 570px;
	}

	.skeleton-row {
		justify-content: space-between;
	}

	.skeleton-bottom {
		width: 728px;
		background-color: #fff;
		height: 40px;
		margin-top: 15px
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 1s;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}
</style>
